import React from "react";
import {
  Button,
  Container,
  Dimmer,
  Form,
  Grid,
  GridColumn,
  Header,
  Icon,
  Image,
  Input,
  Label, Loader,
  Segment
} from "semantic-ui-react";
import './index.css'
import ImgAPI from "./api/handleImg";

class Operation extends React.Component {
  state = {
    file: '',
    loading: false,
    showOriginImg: 'block',
    showHandledImg: 'block',
    name:'Jobs',
    imagePreviewUrl:'',
    imageHandledUrl: ''
  }
  render() {
    let {imagePreviewUrl, imageHandledUrl, showOriginImg, showHandledImg, loading} = this.state;
    let imagePreview = null;
    let imageHandledView = null;
    if(imagePreviewUrl) {
      imagePreview = (<Image src={imagePreviewUrl}  />)
      showOriginImg = 'none';
    } else {
      showOriginImg = 'block';
    }
    if (imageHandledUrl) {
      imageHandledView = (<Image src={imageHandledUrl} />)
      showHandledImg = 'none';
    }

    return (
      <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
        <Grid.Row>
          <Grid.Column style={{ maxWidth: 550 }}>
            <Header as='h3' color='teal' textAlign='center'>
              <Icon name='bolt'/>图片识别微服务
            </Header>
            <Form>
              <Form.Input id="avatarFor" type='file' onChange={this.handleImageChange}/>
            </Form>

            <Button style={{marginTop: '10px'}} content='识别图片' onClick={this.chargeFunc} primary></Button>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row style={{maxWidth: 700, marginTop: '-3%'}} centered columns={2}>
          <Grid.Column>
            <Label style={{color: "#1890FF", width: 300, height: 300, border: "1px dashed #1890FF", margin: '10px', padding: '3px 10px ', display: showOriginImg}}
                   htmlFor="avatarFor">原始图片</Label>
            {imagePreview}

          </Grid.Column>
          <Grid.Column>
            <Label style={{color: "#1890FF", width: 300, height: 300, border: "1px dashed #1890FF", margin: '10px', padding: '3px 10px ', display: showHandledImg}}
                   htmlFor="avatarFor">识别后图片</Label>
            <Dimmer active={loading}>
              <Loader>识别中</Loader>
            </Dimmer>
            {imageHandledView}
          </Grid.Column>
        </Grid.Row>
      </Grid>

      // <Container>
      //   <Input id="avatarFor" type='file' onChange={(e) => this.handleImageChange}/>
      //   <label style={{color: "#1890FF", border: "1px dashed #1890FF", padding: '3px 10px ', display: this.state.showImg}}
      //          htmlFor="avatarFor">+点击上传图片</label>

      // </Container>
    )
  }
  handleImageChange = (e) => {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];
    reader.onloadend = () => {
      console.log('文件名为—',file);
      console.log('文件结果为—',reader.result);
      this.setState({
        file: file,
        imagePreviewUrl: reader.result,
        showHandledImg: 'block',
        imageHandledUrl: ''
      })
    }

    reader.readAsDataURL(file);
  }

  chargeFunc = (e) => {
    const formData = new FormData();
    let {file} = this.state;
    console.log(file);
    formData.append('images', file);
    if(file) {
      this.setState({
        loading: true,
      })
      ImgAPI.handleImg(formData).then(res => {
        if(res.data.status === "success") {
          this.setState({
            imageHandledUrl: res.data.img,
            loading: false,
          })
        } else {
          alert('请求服务失败');
        }
      })
    } else {
      alert('请选择图片');
    }

    // this.setState({
    //   showHandledImg: 'none',
    // })
  }

}

export default Operation;